

<template>
  <Draggable class="drawing-board common-draggable el-row" :list="layouts" :animation="340" group="componentsGroup">
    <RenderItem
      v-for="(item,index) in layouts"
      :key="item.id"
      :index="index"
      :current-item="item"
      @copyItem="drawingItemCopy"
      @deleteItem="drawingItemDelete"
    ></RenderItem>
  </Draggable>
</template>
<script>
import Draggable from 'vuedraggable'
import RenderItem from "./render-item"
export default {
  name: "common-draggable",
  props: {
    layouts: {
      type: Array
    },
  },
methods:{
  drawingItemCopy(item) {
    let clone = JSON.parse(JSON.stringify(item))
    clone.id += new Date().getTime();
    this.layouts.push(clone)
    this.$store.dispatch("formGen/SET_COMPONENT",clone);
    // this.activeFormItem(clone.id)
  },
  drawingItemDelete(index) {
    this.layouts.splice(index,1)
    this.$store.dispatch("formGen/CLEAN_COMPONENT")
  }
},
  components:{
    Draggable,
    RenderItem
  },
}
</script>
<style scoped lang="scss">
.common-draggable{
  padding-bottom: 10px;
}
</style>
